<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="js/css/bootstrap.min.css"/>
	    <link rel="stylesheet" type="text/css" href="less/1.css"/>
	</head>
	<body>
		<div class="app">
			<header class="headers">
			<div class="h-left">
				<span class="glyphicon glyphicon-menu-left" @click = "bac"></span>
			</div>
			<h1>城市选择</h1>
			<div class="bottom">
				<input type="text" placeholder="输入城市名或者拼音"/>
			</div>
			</header>
			<div class="hot hot1">当前城市</div>
			<div class="localcity">
				<span>{{title}}</span>
			</div>
			<div class="hot hot1">热门城市</div>
			<div class="cityHot a">
				 <span v-for="(v,i) in list" v-on:click="btnss(v)">{{v.name}}</span>
			</div>
			<div id="cit">
				<div class="cit-inner" @scroll="top">
					<div class="allCity a" v-for="(v,i) in all" >
						<div class="hot hot1" >
							{{i}}
						</div>
						<p v-for="(v,b) in v" v-on:click="btnss(v)">{{v.name}}</p>
					</div>
				</div>
			</div>
		</div>
		
		<script src="js/flexible.debug.js"></script>
		<script src="js/flexible_css.debug.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/vue.js"></script>
		<script>
			
//			function callback(data){
//				var newstr = "";
//				var datas = data.hotCities;
//				$.each(datas,function(i,v){
//					newstr += `
//				     <span v-on:click="btnss">${v.name}</span>
//				  `
//				})
//				$(".cityHot").append(newstr);
//				var newstrs = "";
//				var data = data.cities.A;
//				$.each(data,function(i,v){
//					newstrs +=`
//					   <p v-on:click="btnss">${v.name}</p> 
//					`
//				})
//				$(".allCity").append(newstrs)
//				
//			}
			var vue1 = new Vue({
				el:".app ",
				data:{
					list:"",
					all:"",
					title:"北京"
				},
			   methods:{
			   	btnss:function(v){
			   	   console.log(v.name)
			   	   this.title = v.name
			   	   sessionStorage.name = this.title; 
			   	},
			   	bac:function(){
			   		history.back()
			   	},
			   	top:function(){
			   		console.log(1)
			   	}
			   	
			   	},
			   	mounted(){
			   		$.ajax({
					type:"get",
					url:"json/city.json",
					async:true,
					success:(res)=>{
						this.list = res.data.hotCities ;
						this.all = res.data.cities ;
						console.log(this.all)
					}
					
			     });
			    console.log(this.title)
			
		 	}	
			})
		</script>
	</body>
</html>
